<template>
  <div id="app" :class="{ myactive: lights }">

    <router-view @change="changes" :lights="lights"/>
    <!-- <router-view></router-view> -->
  </div>
</template>

<script>

export default {
  data() {
    return { lights: false };
  },
  methods: {
    changes(light) {
      this.lights = light;
    },
  },
};
</script>
<style lang="less" scoped>
.myactive {
  background-color: black;
  color: white;
}
* {
  height: 1000vh;
}
// .styleChange(@theme){
//   @opacity:'opacity-@{theme}';
//   @color-main-background:'color-main-background-@{theme}';
//   .theme-back{
//     background:@@color-main-background;
//   }
//   img{
//     filter:brightness(@@opacity);
//   }
// }
// .body-theme-light{
//   .styleChange((light));
// }
// .body-theme-dark{
//   .styleChange(dark);
// }

//夜间模式
.app {
  .dark {
    height: 100vh;
    // background-color: #333333;
    color: rgb(241, 232, 232);
    background: #000;
  }
  .theme-dark {
    position: absolute;
    bottom: 50px;
    left: 70px;
    width: 50px;
    height: 50px;
    // background: url("../assets/yueduye-yejianmoshi.png") no-repeat center;
    background-size: 70%;
    line-height: 120px;
  }
  .theme-sun {
    position: absolute;
    bottom: 50px;
    left: 70px;
    width: 50px;
    height: 50px;
    // background: url("../assets/rijianmoshixhdpi.png") no-repeat center;
    background-size: 70%;
    line-height: 120px;
  }
}
</style>
